<template>
<!-- 填写密码 -->
  <div class="password" v-if="show">
      <div class="passwordForm">
        <p class="passwordFormT">请设置密码！</p>        
        <form action="" @keyup.13="passwordBut">
          <div>
            <span class="MinputTitle">
              <i>*</i>
              <span>新密码：</span>
            </span>
            <input type="text" id="newPassword" autofocus v-model="newPasswordVal" name="newPassword" @blur="psswordB" @focus="psswordF">
            <span class="PwError" :class="PwErrorN? 'PwErroRed' : 'PwErroBlue'"><i></i><span>{{newPwError}}</span></span>
          </div>
          <div>
            <span class="MinputTitle">
              <i>*</i>
              <span>再次输入密码：</span>
            </span>
            <input type="text" id="againPassword" v-model="againPasswordVal" name="againPassword" @blur="psswordB" @focus="psswordF">
            <span class="PwError" :class="PwErrorA? 'PwErroRed' : 'PwErroBlue'"><i></i><span>{{againPwError}}</span></span>            
          </div>
          <input type="button" value="确定" @click="passwordBut">
        </form>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      'newPwError': '',
      'againPwError': '',
      'PwErrorN': false,
      'PwErrorA': false,
      'newPasswordVal': '',
      'againPasswordVal': '',
      'newPasswordI': false,
      'againPasswordI': false
    }
  },
  props: [
    'show',
    'getMData',
    'getPData'
  ],
  methods: {
    psswordB: function () {
      var obj = {
        'newPwNull': '请输入密码',
        'againPwNull': '请再次输入密码',
        'newPwError': '长度为6~14个字符、支持数字、大小写字母不允许有空格',
        'againPwError': '',
        'newPwTrue': '',
        'againPwTrue': '',
        'PwErrorColor': true
      }
      this.passwordBF(event, obj)
    },
    psswordF: function () {
      var obj = {
        'newPwNull': '长度为6~14个字符、支持数字、大小写字母不允许有空格',
        'againPwNull': '请再次输入密码',
        'newPwError': '长度为6~14个字符、支持数字、大小写字母不允许有空格',
        'againPwError': '',
        'newPwTrue': '',
        'againPwTrue': '',
        'PwErrorColor': false
      }
      this.passwordBF(event, obj)
    },
    passwordBF: function (event, obj) {
      var target = event.target
      if (target.id === 'newPassword') {
        if (target.value === '') {
          this.newPwError = obj.newPwNull
          this.PwErrorN = obj.PwErrorColor
          this.newPasswordI = false          
        } else if (!(/^[a-zA-Z0-9_]{6,14}$/.test(target.value))) {
          this.newPwError = obj.newPwError
          this.PwErrorN = obj.PwErrorColor
          this.newPasswordI = false          
        } else {
          this.newPwError = obj.newPwTrue
          this.newPasswordI = true
        }
      } else if (target.id === 'againPassword') {
        if (target.value === '') {
          this.againPwError = obj.againPwNull
          this.PwErrorA = obj.PwErrorColor
          this.againPasswordI = false
        } else if (!(/^[a-zA-Z0-9_]{6,14}$/.test(target.value))) {
          this.againPwError = obj.againPwError
          this.PwErrorA = obj.PwErrorColor    
          this.againPasswordI = false                
        } else {
          this.againPwError = obj.againPwTrue
          this.againPasswordI = true          
        }
      }
    },
    passwordBut: function () {
      var T = this
      var obj = {
        'newPwNull': '请输入密码',
        'againPwNull': '请再次输入密码',
        'newPwError': '长度为6~14个字符、支持数字、大小写字母不允许有空格',
        'againPwError': '2次密码输入不一致',
        'newPwTrue': '',
        'againPwTrue': '',
        'PwErrorColor': true
      }
      if (this.newPasswordVal === '') {
          this.newPwError = obj.newPwNull
          this.PwErrorN = obj.PwErrorColor
          this.newPasswordI = false
      } else {
        if (!(/^[a-zA-Z0-9_]{6,14}$/.test(this.newPasswordVal))) {
          this.newPwError = obj.newPwError
          this.PwErrorN = obj.PwErrorColor
          this.newPasswordI = false          
        } else {
          this.newPwError = obj.newPwTrue
          this.newPasswordI = true
        }
      }
      if (this.againPasswordVal === '') {
        this.againPwError = obj.againPwNull
        this.PwErrorA = obj.PwErrorColor
        this.againPasswordI = false        
      } else {
        if (this.againPasswordVal !== this.newPasswordVal) {
          this.againPwError = obj.againPwError
          this.PwErrorA = obj.PwErrorColor    
          this.againPasswordI = false  
        } else {
          this.againPwError = obj.againPwTrue
          this.againPasswordI = true 
        } 
      }
      if (this.newPasswordI && this.againPasswordI) {
        this.$http.post('http://192.168.31.217:8080/member/info', {
          mmiUsername: this.getMData.mmiUsername,
          mmiPhone: this.getPData.mmiPhone,
          mmiCompany: this.getMData.mmiCompany,
          mmiMailbox: this.getMData.mmiMailbox,
          mmtId: this.getMData.mmtId,
          inforsourceids: this.getMData.inforsourceids,
          mmiPwdJm: this.againPasswordVal
        }).then(function (response) {
          if (response.data.status === 200) {
            var obj = {
              'identityShow': false,
              'messageShow': false,
              'passwordShow': false,
              'completeShow': true,
              'identityShowI': true,
              'messageShowI': true,
              'passwordShowI': true,
              'completeShowI': true,
            }
            T.$emit('flowPClick', obj)
          }
        })
      }
    }
  }
}
</script>

<style>
  @import '../../../static/register/password.css'
</style>
